<template>
	<div>
		<div class="h-h-start-v-center" style="margin-left: 30px;">
			<ButtonGroup v-for="(item,index) in tagList" :key="index">
				<Button @click="getAllShopList(index)">{{item}}</Button>
			</ButtonGroup>
			<Input style="width: 200px; margin-left: 20px;" suffix="ios-search" placeholder="搜索内容"></Input>
		</div>
		<div class="h-h-start-v-center-fw" style="align-content: center;">
			<div @click="openModel(i.status,i.shop_id)" v-for="i in shopListPage" class="shop-box" style="margin: 30px 30px; margin-bottom: 30px;">
				<div style="background-color: #AA0000;color: #FFFFFF; width: 80px;font-size: 16px;padding: 4px 0;margin: 10px;">
					{{i.status==0?'未开奖':i.status==1?'开奖中':i.status==2?'发货中':i.status==3?'验收中':'已完成'}}
				</div>
				<img style="width: 100%;" :src="i.picture[0]" alt="">
				<h2>科沃斯 地宝 T9 扫地机器人</h2>
				<div class="h-h-sa-v-center" style="margin-top: 20px; font-size: 15px;">
					<div class="v-h-center-v-start" style="width: 100%; margin-top: 20px; font-size: 15px;align-items: flex-end;height: 100px;">
						<div class="h-h-sb-v-center" style="width: 90%;margin: 10px auto;">
							<div>
								申请人数：<span style="color: #182848;">{{i.apply_sum}}</span>
							</div>
							<div>
								数量：<span style="color: #AA0000;">{{i.sum}}</span>
							</div>
						</div>
						<Progress status="active" :percent="parseInt((i.apply_sum/i.sum)*100)>100?100:parseInt((i.apply_sum/i.sum)*100)" />
					</div>
				</div>
			</div>
		</div>
		<Page :current="1" :total="shopList.length" @on-change="changePage" :page-size="pageSize" />
		<Modal footer-hide v-model="isShowModel" fullscreen title="众测详情">
			<div class="v-hv-center">
				<Steps :current="current-1">
					<Step title="开奖中" content="请抽奖"></Step>
					<Step title="发货中" content="填写发货单"></Step>
					<Step title="验收中" content="审核测评报告"></Step>
					<Step title="完成" content="完成此众测项目"></Step>
				</Steps>
			</div>
			<div v-if="current==1">
				<div style="width: 1000px; margin: 0 auto;height: 1000px;margin-top: 50px;">
					<div class="shdow" :style="{
						 				 height:isChoose==false?'100px':'400px'
						 }">
						<div style=" padding-right: 70px;height: 100px; align-items: flex-start;padding-top: 30px;" class=" h-h-sb-v-center">
							<div class="h-h-start-v-center">
								<span style="margin-left: 30px;font-size: 20px;font-weight: 700;color: #aa0000;">开奖情况</span>
								<div style="margin-left: 30px;">
									<Avatar v-for="(item,index) in activeChooseList" :key='index' :src="item.avatar" style="background-color: #eaeaea; color: #2C3E50;margin-right: 20px;"
									 size="large" />
								</div>
							</div>
							<!-- <Button @click="isChoose=!isChoose" v-if="!isChoose" type="error">随机选择</Button> -->
							<div>
								<Button @click="choose" type="error">{{stopChoose==true?'开始抽奖':'停止'}}</Button>
								<Button @click="nextToTwo" type="primary" v-if="activeChooseList.length>=shopInfo.sum">确定</Button>
								<Button @click="reChoose" type="primary" v-if="activeChooseList.length>=shopInfo.sum">重新选择</Button>
							</div>
						</div>
						<div v-if="isChoose" class="v-hv-center">
							<div class="v-hv-center" v-if="stopChoose" style="width: 300px;height: 200px;background-color: #AA0000;">
								<div style="width: 100px;height: 100px;box-shadow: rgb(0 0 0 / 20%) 0px 2px 12px 0px;border-radius: 50px;">
									<img :src="avtiveAvatar" style="overflow: hidden; width: 100%;height: 100%; object-fit: cover; border-radius: 50px;"
									 alt="">
								</div>
							</div>
							<Carousel v-if='!stopChoose' class='swipter' style="width:300px; height: 200px;" :autoplay="!stopChoose"
							 :autoplay-speed="100" dots="none" arrow="never" v-model="value2" loop>
								<CarouselItem v-for="(item,index) in 3" :key="index">
									<div class="demo-carousel v-hv-center">
										<div style="width: 100px;height: 100px;box-shadow: rgb(0 0 0 / 20%) 0px 2px 12px 0px;border-radius: 50px;">
											<img src="../../../../static/wh.png" style="width: 100%;
							   height: 100%;
							   object-fit: cover;
							   border-radius: 50px; display: flex;
							   justify-content: center;
							   align-items: center;
							   background-color:#CCCCCC;
							   padding: 20px;
							   overflow: hidden;"
											 alt="">
										</div>

									</div>
								</CarouselItem>

							</Carousel>
							<!-- <div class="v-hv-center" style="width: 100%;margin-top: 30px;">
								<span>正在抽奖</span>
							</div> -->
						</div>
					</div>
					<h2 style="margin-left: 50px;">申请名单</h2>
					<div style="margin:30px; height: calc(60vh); overflow-y: scroll;" class="h-hv-start-fw">
						<div v-for="(item,index) in formList" style="margin: 20px;" class="v-hv-center">
							<Avatar :src="item.avatar" size="large" />
							<span style="margin-top: 10px;">{{item.nickname}}</span>
							<!-- <span style="margin-top: 10px;">抽奖权重：<span style="color: brown;font-weight: 700;">13</span></span> -->
						</div>
					</div>
					<div style="width: 100%; margin: 30px auto;" class="v-hv-center">
						<Button style="margin-bottom: 30px;" @click="next" type="primary">下一步</Button>
					</div>
				</div>
				<Modal v-model="isShowModel2" title="提示" @on-ok="asyncOK">
					<p>{{tips}}</p>
				</Modal>
			</div>
			<div v-if="current==2">
				<div style="width: 1000px; margin: 0 auto;height: 1000px;margin-top: 50px;">
					<h2 style="margin-bottom: 30px;">申请名单</h2>
					<Table border :columns="columns12" :data="data6">

					</Table>
					<div style="width: 100%; margin: 30px auto;" class="v-hv-center">
						<Button style="margin-bottom: 30px;" @click="nextToThree" type="primary">下一步</Button>
					</div>
				</div>
				<Modal v-model="isShowModel2" title="提示" @on-ok="asyncOK">
					<p>{{tips}}</p>
				</Modal>
			</div>
			<div v-if="current==3">
				<div class="h-h-sa-v-center" style="width: 1400px; margin: 0 auto;height: 1000px;margin-top: 50px; align-items: flex-start;">
					<div style="flex: 6;">
						<h2 style="margin-bottom: 30px;">审核报告</h2>
						<div style="height: calc(80vh); overflow-y: scroll; margin-right: 30px;" class="h-h-start-v-center-fw">
							<div @click="checkReportDetail(index)" v-for="(item,index) in reportList">
								<div style="position: relative;" class="report-box">
									<div v-if="item.publish_status==1?true:false" class="pass-box v-hv-center">
										<img style="width: 100px;height: 100px;" src="../../../../static/yes.png" alt="">
									</div>
									<h3>{{item.title}}</h3>
									<br />
									<div class="content-box" v-html='item.content'></div>
								</div>
								<div style="margin: 0 30px;">
									<Avatar style="margin-right: 20px;" :src="item.avatar" />
									<span>{{item.nickname}}</span>
								</div>
							</div>
						</div>
					</div>
					<div :style="{
                flex:phoneSize=='small'?2:15
          }">
						<div style="margin: 30px auto; font-size: 18px;width: 60%;" class="h-h-sa-v-center">
							<span @click="phoneSize='small'" :style="{
                color: phoneSize=='small'?'#A33535':'#000'
              }">iphone</span>
							<Divider type="vertical" />
							<span @click="phoneSize='big'" :style="{
                color: phoneSize=='big'?'#A33535':'#000'
              }">ipad</span>
						</div>
						<div style="height:calc(76vh); position: relative;border-radius: 15px;overflow:hidden;flex: 15; width: 100%;"
						 class="demo-split">
							<h3 style="margin:20px 0 15px 15px">
								<Icon type="ios-arrow-back" style="margin-bottom:3px; margin-right:10px" size="20" />商品详情
							</h3>
							
							<div style="height:calc(73vh); margin:10px 20px; font-size: 16px;overflow-y: scroll;">
								<div style="width: 100%;" class="v-hv-center">
												<img :style="{
								  width:phoneSize=='small'?'100%':'50%'
								}" :src="reportInfo.picture"
												 alt="">
											</div>
								<h1 :style="{
                  textAlign: phoneSize=='big'?'center':'left'
                }">{{reportInfo.title}}</h1><br />
								<div v-html="reportInfo.content"></div>
							</div>
							<div  class="h-h-sa-v-center" style="width:100%; height:45px; background-color:#cc2200;position: absolute;bottom:0;cursor: pointer;">
								<span @click="pass(reportInfo.article_id)" style="color:#fff;font-size:16px;font-weight:bold;">通过</span>
								<span @click="unpass(reportInfo.article_id)" style="color:#fff;font-size:16px;font-weight:bold;">不通过</span>
							</div>
						</div>
						<div style="width: 100%; margin: 30px auto;" class="v-hv-center">
							<Button style="margin-bottom: 30px;" @click="next" type="primary">下一步</Button>
						</div>
					</div>

				</div>
			</div>
			<div v-if="current==4">
				<div class="v-h-center-v-start" style="width: 1400px; margin: 0 auto;height: 1000px;margin-top: 50px; ">
					<img src="../../../../static/success.png" style="width: 500px; margin-right: 70px;margin-top: 50px;" alt="">
					<h1 style="margin-top: 50px;">您已完成此项目
						<Icon type="ios-checkmark-circle" />
					</h1>

				</div>

			</div>
		</Modal>
	</div>
</template>
<script>
	import {
		getShopList,
		getForm,
		getUserList,
		getShopOne,
		determineChoose,
		getFormAddressList,
		updateAddressForm,
		getReportList,
		passReport
	} from '../../../../API/index.js'
	export default {
		data() {
			return {
				tips: "",
				tagList: [
					'未开奖', '开奖中', '发货中', '验收中', '已完成'
				],
				isShowModel: false,
				isChoose: false,
				value2: 0,
				stopChoose: true,
				current: 1,
				shopList: [],
				shopListPage: [],
				pageSize: 3,
				statusActive: '',
				shopInfo: {},
				formList: [],
				avatarList: [],
				avtiveAvatar: '',
				activeChooseList: [],
				userList: [],
				reportList: [],
				reportInfo:{},
				isShowModel2: false,
				phoneSize: 'small',
				title: '罗永浩收购苹果',
				valueHtml: '<p>理解万岁,苹果要完,理解万岁,苹果要完理解万岁,苹果要完理解万岁,苹果要完理解万岁,苹果要完理解万岁,苹果要完理解万岁,苹果要完</p>',
				columns12: [{
						title: '姓名',
						key: 'name'
					},
					{
						title: '电话',
						key: 'phone'
					},
					{
						title: '地址',
						key: 'address'
					},
					{
						title: '快递单号',
						width: 250,
						align: 'center',
						key: 'expressNumber',
						render: (h, params) => {
							return h('Input', {
								props: {
									value: params.row.expressNumber
								},
								on: {
									'on-change': (event) => {
										this.data6[params.index][params.column.key] = event.currentTarget
											.value; //获取编辑行的inde和编辑字段名，对表格数据进行重新赋值
									}
								}

							});
						}
					},
					{
						title: '物流公司',
						width: 200,
						align: 'center',
						key: "expressCompany",
						render: (h, params) => {
							return h('Input', {
								props: {
									value: params.row.expressCompany
								},
								on: {
									'on-change': (event) => {
										this.data6[params.index][params.column.key] = event.currentTarget
											.value; //获取编辑行的inde和编辑字段名，对表格数据进行重新赋值
									}
								}
							});
						}
					}
				],
				data6: []
			}
		},
		watch: {
			avtiveAvatar: function(val, oldVal) {
				// console.log('new:%s,old:%s', val, oldVal)
				this.$forceUpdate()
			}
		},
		created() {
			this.getAllShopList()
			// this.avtiveAvatar = this.avatarList[0]
			this.$forceUpdate()
		},
		methods: {
			choose() {
				var i = 0
				this.isChoose = true
				this.stopChoose = !this.stopChoose

				console.log(this.value2)
				// this.avtiveAvatar = this.avatarList[0]
				if (this.stopChoose == true) {
					this.getUserList()
				}
				this.$forceUpdate()
			},
			getUserList() {
				console.log(this.formList)
				console.log("activeChooseList", this.activeChooseList)
				if (this.activeChooseList.length != 0) {
					this.activeChooseList.forEach((item, index) => {
						this.userList = this.formList.filter(i => i.user_id != item.user_id)
					})
					this.activeChooseList.forEach((item, index) => {
						this.userList = this.userList.filter(i => i.user_id != item.user_id)
					})

				} else {
					this.userList = this.formList
				}
				let data = {
					userList: this.userList
				}
				console.log("userList", this.userList)
				getUserList(data).then(res => {
					console.log(res, res.data.data)
					if (res.data.data == null || this.shopInfo.sum <= this.activeChooseList.length) {
						this.$Message.error('已超出最大抽奖名单');
						return
					}
					this.userList.forEach((item, index) => {
						if (res.data.data == index && res.data.data != null) {
							this.activeChooseList.push(item)
						}
					})
					this.avtiveAvatar = this.activeChooseList[this.activeChooseList.length - 1].avatar
					console.log(this.activeChooseList)
				})
			},
			next() {
				this.current = this.current + 1
				this.$forceUpdate()
			},
			getAllShopList(index) {
				console.log(index)
				let data = {
					id: null
				}
				getShopList(data).then(res => {
					this.shopList = []
					console.log(res)
					res.data.data.forEach((item, index) => {
						item.picture = this.$stringToArray(item.picture)
					})
					if (index == undefined) {
						index = 0
					}
					res.data.data.forEach((item, i) => {
						if (index == item.status) {
							this.shopList.push(item)
						}
					})
					// }
					this.changePage(1)
				})
			},
			changePage(e) {
				console.log(e)
				let begin = this.pageSize * (e - 1)
				let end = begin + this.pageSize
				var shopListToString = this.shopList.slice(0)
				console.log(begin, end)
				this.shopListPage = shopListToString.splice(begin, end)
				this.$Loading.finish();
			},
			getForm(id) {
				let data = {
					shop_id: id
				}
				getForm(data).then(res => {
					console.log(res)
					this.formList = res.data.data
					res.data.data.forEach((item, index) => {
						this.avatarList.push(item.avatar)
					})
				})
			},
			getShopDetail(id) {
				let data = {
					id: id
				}
				getShopOne(data).then(res => {
					this.shopInfo = res.data.data[0]
					console.log(this.shopInfo)
				})
			},
			openModel(status, id) {
				this.statusActive = status
				if (status == 0) {
					this.isShowModel = false
				} else {
					this.isShowModel = true
					this.current = this.statusActive
					console.log("current", this.current)
					this.getForm(id)
					this.getShopDetail(id)
					this.getFormAddressList(id)
					this.getReportList(id)
				}
			},
			reChoose() {
				this.activeChooseList = []
				this.userList = []
				this.$forceUpdate()
			},
			asyncOK() {
				if (this.current == 1) {
					this.submitChoose()
				} else if (this.current == 2) {
					this.uploadAddressForm()
				}


			},
			submitChoose() {

				let data = {
					formList: this.formList,
					chooseList: this.activeChooseList,
					shop_id: this.shopInfo.shop_id
				}
				determineChoose(data).then(res => {
					console.log(res.data.data)
					if (res.data.data = 'success') {
						this.$Message.success('提交成功');
						this.current = 2
					}
				})
			},
			getFormAddressList(id) {
				let data = {
					shop_id: id
				}
				getFormAddressList(data).then(res => {
					console.log(res.data.data)
					res.data.data.forEach((item, index) => {
						this.data6.push({
							user_id: item.user_id,
							name: item.name,
							phone: item.phone,
							address: item.province + item.city + item.county + item.fulladdress,
							shop_id: item.shop_id,
							expressNumber: "",
							expressCompany: ""
						})
					})
				})
			},
			uploadAddressForm() {
				console.log(this.data6)
				let data = {
					formAddressList: this.data6
				}
				updateAddressForm(data).then(res => {
					console.log(res)
					if (res.data.data = 'success') {
						this.$Message.success('提交成功');
						this.current = 3
					}
				})
			},
			nextToTwo() {
				this.tips = '确定提交开奖名单吗？'
				this.isShowModel2 = true
			},
			nextToThree() {
				this.tips = '确定提交发货单吗？'
				this.isShowModel2 = true
			},
			//获取评测报告
			getReportList(id) {
				let data = {
					shop_id: id
				}
				getReportList(data).then(res => {
					console.log(data)
					this.reportList = res.data.data
					this.$forceUpdate()
				})
			},
			//查看报告详情
			checkReportDetail(index){
				this.reportInfo = this.reportList[index]
			},
			//通过
			pass(id){
				console.log("点击了通过")
				let data = {
					article_id:id,
					status:1
				}
				console.log(data)
				passReport(data).then(res => {
					// if(res.data.msg=='更新成功'){
						this.$Message.success('更新成功');
						this.getReportList(this.shopInfo.shop_id)
					// }
				})
			},
			unpass(id){
				console.log("点击了不通过")
				let data = {
					article_id:id,
					status:0
				}
				console.log(data)
				passReport(data).then(res => {
					// if(res.data.msg=='更新成功'){
						this.$Message.success('更新成功');
						this.getReportList(this.shopInfo.shop_id)
						
					// }
				})
			}
		}
	}
</script>
<style>
	.shop-box {
		width: 260px;
		height: auto;
		box-shadow: rgb(0 0 0 / 10%) 0px 2px 12px 0px;
		/* padding-bottom: 10px; */
	}

	.shdow {
		box-shadow: rgb(0 0 0 / 10%) 0px 2px 12px 0px;
		background-color: #fff;
		width: 100%;
		margin: 0 auto;
		margin-bottom: 30px;
	}

	.demo-carousel {
		width: 100%;
		height: 180px;
		/* background-color: #471a50; */
	}

	.swipter {
		background-color: rgb(170, 0, 0);
		/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	}

	.report-box {
		width: 180px;
		height: 250px;
		box-shadow: rgb(0 0 0 / 10%) 0px 2px 12px 0px;
		padding: 30px;
		margin: 30px 30px 20px 30px;
	}

	.demo-split {
		/* width:48%; */
		/* height: 200px; */
		box-shadow: rgb(0 0 0 / 10%) 0px 2px 12px 0px;
	}

	.demo-split-pane {
		padding: 10px;
	}
	.content-box{
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 6;
		overflow: hidden;
	}
	.pass-box{
		width: 100%;
		height: 100%;
		position: absolute;
		margin-top: -30px;
		margin-left: -30px;
		z-index: 100;
		background-color: rgba(255, 255, 255, 0.5);
	}
</style>
